<template>
    <div class="layout05-wrapper">
        <div class="photos">
            <div class="left" :style="{backgroundImage: `url('https://img1.doubanio.com/view/photo/m/public/p2523595827.jpg')`}"></div>
            <div class="right">heool</div>
        </div>
        <h3 class="title"></h3>
        <p class="author"></p>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    mounted() {
        console.log(this.data)
    }
    // computed: {
    //     leftStyle() {
    //         return {
    //             backgroundImage: `url(${require(this.data.target.cover_url)})`
    //         }
    //     }
    // }
}
</script>

<style lang="scss" scoped>
@import 'common/scss/variable.scss';
.layout05-wrapper {
    .photos {
        display: flex;
        .left {
            flex: 3.2;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
        .right {
            flex: 1;
        }
    }
    .title {
        font-size: $middle-font-size;
        color: $black-font-color;
        font-weight: 500;
        line-height: 1.41;
        margin-bottom: 6px;
    }
    .author {
        font-size: $small-font-size;
        color: $light-gray-font-color;
    }
}
</style>
